<template>
  <div class="submitAS">
    <div class="itemBox">
      <div class="title">售后方式：</div>
      <el-select
        v-model="form.type"
        placeholder="请选择售后方式"
        style="width:500px;"
      >
        <el-option
          v-for="item in modes"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <div class="itemBox">
      <div class="title">货物状态：</div>
      <el-select
        v-model="form.goodsState"
        placeholder="请选择货物状态"
        style="width:500px;"
      >
        <el-option
          v-for="item in goodsStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value" />
      </el-select>
    </div>
    <div class="itemBox">
      <div class="title">售后理由：</div>
      <el-select
        v-model="form.reason"
        placeholder="请选择售后理由"
        style="width:500px;"
      >
        <el-option
          v-for="item in reasons"
          :key="item"
          :label="item"
          :value="item" />
      </el-select>
    </div>
    <div class="itemBox reason">
      <div class="title">原因描述：</div>
      <el-input
        type="textarea"
        :rows="6"
        placeholder="输入申请退货原因描述"
        v-model="form.explain"
        maxlength="200"
        style="width:500px;"
      />
    </div>
    <div class="upload">
      <div class="title">上传凭证：</div>
      <el-upload
        :action="upload"
        list-type="picture-card"
        :limit="3"
        :on-success="handleSuccess"
        :on-remove="handleRemove">
        <i class="el-icon-camera"></i>
        <p>最多上传3张</p>
      </el-upload>
    </div>
    <div class="submit">
      <el-button
        plain
        @click="submit"
      >提交申请</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineComponent, reactive } from 'vue'

import {
  upload
} from '@/api/upload.js'
import {
  submitAfter
} from '@/api/user/afterSale.js'

defineComponent({
  name: 'OrderDetailSubmit'
})

const modes = [{
  value: 1,
  label: "仅退款"
}, {
  value: 2,
  label: "退货退款"
}]
const goodsStatus = [{
  value: 1,
  label: "已收到货"
}, {
  value: 0,
  label: "未收到货"
}]
const reasons = []

let form = reactive({
  type: '',
  goodsState: '',
  reason: '',
  explain: '',
  urls: [],
  skus: [],
})
// 申请售后
function submit () {
  let errMsg = "";
  if (form.type === "") {
    errMsg += " 请选择售后方式 ";
  }
  if (form.goodsState === "") {
    errMsg += " 请选择货物状态 ";
  }
  if (form.reason === "") {
    errMsg += " 请选择售后理由 ";
  }
  if (errMsg.length !== 0) {
    ElMessage.warning(errMsg);
    return;
  }
  let productPrice = 0
  for (var i in this.orderData.skus) {
    form.skus[i] = {
      number: this.orderData.skus[i].number,
      skuId: this.orderData.skus[i].skuId
    };
    productPrice += (this.orderData.skus[i].price * this.orderData.skus[i].number);
  }
  submitAfter({
    afterType: form.type,
    explain: form.explain,
    goodsState: form.goodsState,
    image: form.urls.join(","),
    // orderId: this.orderData.orderId,
    price: productPrice,
    returnReason: form.reason,
    skus: form.skus
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success("售后申请成功");
      setTimeout(() => {
        this.$router.push("/orderAfterSale");
      }, 1000);
    }
  }).catch(err => {
    ElMessage.error(err.message)
  })
}
function handleSuccess (res) {
  form.urls.push(res.data.url);
}
function handleRemove (file, fileList) {
  form.urls = [];
  for (var i in fileList) {
    form.urls.push(fileList[i].response.data.url);
  }
}

</script>

<style lang="scss" scoped>
.submitAS{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  .itemBox{
    width: 580px;
    display: flex;
    margin: 10px;
    .title{
      min-width: 80px;
      line-height: 40px;
      text-align: right;
    }
    :deep(.el-input__icon){
      color: $mainGlod;
    }
  }
  .reason{
    position: relative;
  }
  .upload{
    display: flex;
    position: absolute;
    right: 60px;
    bottom: 120px;
    .title{
      line-height: 40px;
    }
    :deep(.el-upload--picture-card){
      height: 140px;
      background-color: #FFF;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      i{
        font-size: 32px;
      }
      p{
        margin: 10px 0;
        font-size: 12px;
        line-height: 0;
      }
      &:hover{
        i{
          color: $mainGlod;
        }
      }
  }
  }
  .submit{
    margin: 30px 0;
    .el-button{
      width: 200px;
      height: 50px;
      color: #FFF;
      background-color: #333333;
      border-radius: 0px;
    }
  }
  :deep(.el-select-dropdown__item){
    &:hover{
      background: $mainGlod;
    }
  }
}
</style>
